<script setup>
import { config } from "@/config";
import { ref, nextTick } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { get } from "@/request/request";
import loginModale from "@/pages/components/login.vue";
import TnIcon from "@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue";
import TnListItem from "@tuniao/tnui-vue3-uniapp/components/list/src/list-item.vue";
import TnPopup from "@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue";
import TnButton from "@tuniao/tnui-vue3-uniapp/components/button/src/button.vue";

const userData = ref({});
const vipData = ref({});
const tutor = ref(0);
const loginAuth = ref(false);

onShow(() => {
  if (uni.getStorageSync("sessionKey") && !uni.getStorageSync('auth')) {
    nextTick(() => {
      uni.showModal({
        title: "提示",
        content: "您还没登录，请先登录",
        confirmColor: "#0045cf",
        success: function (res) {
          if (res.confirm) {
            loginAuth.value = true;
          } else if (res.cancel) {
            uni.switchTab({
              url: "/pages/index/index",
            });
          }
        },
      });
    });
  } else {
    getUserMy();
    listRequest();
    adRequest();
    vipRequest();
  }
});

// 获取用户信息
const getUserMy = () => {
  get("/user_my", uni.getStorageSync("sessionKey")).then((res) => {
    console.log("/user_my", res);
    const { data } = res;
    userData.value = data;
    uni.setStorageSync("disCode", data.disCode);
    tutor.value = 1;
  });
};

//获取会员信息
const vipRequest = () => {
  get("/get_vip_data", {
    "Content-Type": "application/x-www-form-urlencoded",
    sessionKey: uni.getStorageSync("sessionKey"),
  }).then((res) => {
    const { data } = res;
    vipData.value = data;
  });
};
//该信息
const penClick = () => {
  if (uni.getStorageSync("sessionKey")) {
    uni.navigateTo({
      url: "/pages/user/components/user_int",
    });
  } else {
    uni.showToast({
      title: "请登录",
      icon: "error",
    });
  }
};
//请家教
const ordereClikc = () => {
  uni.navigateTo({
    url: "/pages/order/order",
  });
};

//教师端
const teacherClick = () => {
  if (userData.value.hasTeacher === true) {
    uni.navigateTo({
      url: "/pages/user/components/teacher/teacher",
    });
  } else {
    uni.navigateTo({
      url: "/pages/user/components/teacher/teacher-info",
    });
  }
};
//获取list
const qrcodeUrl = ref("");
const about = ref({});
const phone = ref("");
//list
const list = [
  {
    index: 0,
    img: "/static/user/order.svg",
    name: "我的订单",
  },
  {
    index: 1,
    img: "/static/user/popularize.svg",
    name: "我的推广",
  },
  {
    index: 2,
    img: "/static/user/phone.svg",
    name: "联系电话",
  },
  // {
  //   index: 3,
  //   img: '/static/user/wecom.svg',
  //   name: '官方公众号'
  // },
  {
    index: 4,
    img: "/static/user/about _us.svg",
    name: "关于我们",
  },
];
const listRequest = () => {
  get("/public_api/get_conf").then((res) => {
    const data = res.data;
    qrcodeUrl.value = data.qrcode;
    about.value = data.about;
    phone.value = data.phone;
  });
};

const qrcode = ref(false);
const content = ref(false);
const phoneOpen = ref(false);
const listClick = (item) => {
  console.log(item.index);
  let index = item.index;
  if (index === 0) {
    uni.navigateTo({
      url: "/pages/user-orders/user-orders",
    });
  }
  if (index === 1) {
    uni.navigateTo({
      url: "/pages/popularize/popularize",
    });
  }
  if (index === 2) {
    phoneOpen.value = true;
  }
  if (index === 3) {
    qrcode.value = true;
  }
  if (index === 4) {
    content.value = true;
  }
};
const qrCodeOffClick = () => {
  qrcode.value = false;
};

//分享
const onShareAppMessage = (res) => {
  if (res.from === "button") {
  }
  return {
    title: "请家教，来找我",
    path: "/pages/index/index",
  };
};

// 广告
const adList = ref({});
const adRequest = () => {
  get("/public_api/get_advert", {
    position: 4,
  }).then((res) => {
    const data = res.data[0];
    adList.value = data;
  });
};

//余额跳转
const moneyClick = () => {
  uni.navigateTo({
    url: "/pages/money/money",
  });
};
const vipClick = () => {
  uni.navigateTo({
    url: "/pages/vip/vip",
  });
};
const vipClickVip = () => {
  uni.showToast({
    title: "永久会员无需重复购买！",
    icon: "error",
  });
};
const phoneClick = () => {
  uni.makePhoneCall({
    phoneNumber: phone.value,
  });
};
</script>
<template>
  <view class="app">
    <view class="user_ava">
      <view class="ava_img">
        <image :src="config.baseUrl + '/file/' + userData.avatar" />
      </view>
      <view class="username">
        <view style="font-size: 32rpx">{{ userData.nickname }}</view>
        <view class="label" v-if="tutor === 1">
          <view class="min_avatar">
            <image src="/static/user/min-avatar.svg" />
            <view style="font-size: 20rpx">{{ userData.id }}</view>
          </view>
          <view v-if="userData.cityName" class="min_position">
            <image src="/static/home/address.svg" />
            <view style="font-size: 20rpx">{{ userData.cityName }}</view>
          </view>
        </view>
      </view>
      <view class="pen" @click="penClick">
        <image src="/static/user/pen.svg" />
      </view>
    </view>
    <template v-if="userData.vip === false">
      <view class="vip_box" @click="vipClick">
        <view class="vip_img">
          <image src="/static/user/vip.svg" />
          <text>开通服务专享产品权益</text>
        </view>
        <view class="vip_right">
          <text>开通会员</text>
          <image src="/static/user/rigt.svg" />
        </view>
      </view>
    </template>
    <template v-if="userData.vip === true">
      <template v-if="vipData.type === 0">
        <view class="vip_box" @click="vipClickVip">
          <image style="height: 64rpx; width: 64rpx" src="/static/user/vip.svg" />
          <view class="vip_img">
            <text>{{ vipData.title }}</text>
          </view>
          <view class="vip_right">
            <text>终身会员</text>
          </view>
        </view>
      </template>
      <template v-if="vipData.type === 1">
        <view class="vip_box" @click="vipClick">
          <image style="height: 64rpx; width: 64rpx" src="/static/user/vip.svg" />
          <view class="vip_img">
            <text>{{ vipData.title }}</text>
            <text>{{ vipData.endTime }}到期</text>
          </view>
          <view class="vip_right">
            <text>立即续约</text>
            <image src="/static/user/rigt.svg" />
          </view>
        </view>
      </template>
      <template v-if="vipData.type === 3">
        <view class="vip_box" @click="vipClick">
          <image style="height: 64rpx; width: 64rpx" src="/static/user/vip.svg" />
          <view class="vip_img">
            <text>{{ vipData.title }}</text>
            <text>{{ vipData.endTime }}到期</text>
          </view>
          <view class="vip_right">
            <text>立即续约</text>
            <image src="/static/user/rigt.svg" />
          </view>
        </view>
      </template>
    </template>
    <view class="money">
      <view class="monet-title" @click="moneyClick">
        <text style="font-size: 20rpx; color: rgba(0, 0, 0, 0.4)">余额</text>
        <text style="font-size: 36rpx">{{ userData.moneyFormat }}</text>
      </view>
      <view class="monet-title">
        <text style="font-size: 20rpx; color: rgba(0, 0, 0, 0.4)">订单</text>
        <text style="font-size: 36rpx">{{ userData.orderCount }}</text>
      </view>
    </view>
    <view class="tutor">
      <view v-if="tutor === 0 || 1" class="bet" @click="ordereClikc">
        <view class="t_icon">
          <image src="/static/user/tutor.svg" />
        </view>
        <view class="t_text">请家教</view>
        <view class="t_icon_e">
          <TnIcon name="right" size="30" color="#aeaeae" />
        </view>
      </view>
      <view v-if="tutor === 1" class="bet" @click="teacherClick">
        <view class="t_icon">
          <image src="/static/user/teacher.svg" />
        </view>
        <view class="t_text">教师端</view>
        <view class="t_icon_e">
          <TnIcon name="right" size="30" color="#aeaeae" />
        </view>
      </view>
    </view>
    <view class="list_box">
      <button style="border-bottom: 2rpx #f8f7f8 solid" class="share" open-type="contact">
        <view class="icon_text">
          <image src="/static/user/customer.svg" />
          <view style="margin: 22rpx">官方客服</view>
        </view>
        <TnIcon name="right" size="28" color="#aeaeae" />
      </button>
      <TnListItem v-for="(item, index) in list" :key="index" right-icon="right" :radius="true" :bottom-border="true"
        @click="listClick(item)">
        <view style="display: flex; align-items: center">
          <image :src="item.img" />
          <text style="margin-left: 20rpx">{{ item.name }}</text>
        </view>
      </TnListItem>
      <button class="share" open-type="share" @click="onShareAppMessage">
        <view class="icon_text">
          <image src="/static/user/share.svg" />
          <view style="margin: 22rpx">分享好友</view>
        </view>
        <TnIcon name="right" size="28" color="#aeaeae" />
      </button>
    </view>
    <view class="ad_box" v-if="adList">
      <image :src="config.baseUrl + '/file/' + adList.src" />
    </view>
  </view>

  <TnPopup v-model="qrcode" open-direction="bottom">
    <view class="tn-p-lg" style="
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      ">公众号二维码
    </view>
    <view style="display: flex; align-items: center; justify-content: center">
      <image style="width: 100%; height: 750rpx" :src="config.baseUrl + '/file/' + qrcodeUrl" />
    </view>
    <view style="
        margin-top: 10rpx;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: -60rpx;
      ">
      <TnButton width="100%" bg-color="#FFF" size="lg" type="primary" @click="qrCodeOffClick">关闭
      </TnButton>
    </view>
  </TnPopup>
  <TnPopup v-model="content" open-direction="bottom">
    <view class="tn-p-lg" style="
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 50rpx;
      ">
      {{ about.title }}
    </view>
    <view style="
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-bottom: 50rpx;
      ">
      <rich-text style="padding: 20rpx" :nodes="about.content" bindtap="tap" />
    </view>
  </TnPopup>
  <TnPopup v-model="phoneOpen" open-direction="bottom">
    <view class="tn-p-lg" style="
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      ">联系电话
    </view>
    <view style="
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-bottom: 50rpx;
      ">
      <view @click="phoneClick">{{ phone }}</view>
    </view>
  </TnPopup>
  <!-- 登录组件 -->
  <loginModale v-model:show="loginAuth" @login-success="getUserMy" />
</template>
<style scoped lang="scss">
.app {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 20rpx;

  .user_ava {
    margin-top: 20rpx;
    padding: 20rpx 0 20rpx 0;
    width: 686rpx;
    background: #ffffff;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .ava_img {
      height: 128rpx;
      width: 128rpx;
      background: #d9e1fe;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .username {
      height: 104rpx;
      width: 390rpx;
      display: flex;
      justify-content: space-around;
      flex-direction: column;

      .label {
        height: 40rpx;
        width: 234rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .min_avatar {
          width: 86rpx;
          height: 40rpx;
          display: flex;
          align-items: center;
          background: #f3f3f3;
          justify-content: space-around;
          border-radius: 6rpx;

          image {
            width: 20rpx;
            height: 20rpx;
          }
        }

        .min_position {
          width: 132rpx;
          height: 40rpx;
          display: flex;
          align-items: center;
          background: #f3f3f3;
          justify-content: space-around;
          border-radius: 6rpx;

          image {
            height: 20rpx;
            width: 20rpx;
          }
        }
      }
    }

    .pen {
      height: 40rpx;
      width: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 33rpx;
        height: 33rpx;
      }
    }
  }

  .vip_box {
    margin-top: 10rpx;
    width: 686rpx;
    height: 102rpx;
    background: linear-gradient(to right, #fbdba5, #f4cd92);
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .vip_img {
      width: 340rpx;
      //height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;

      text {
        font-size: 28rpx;
        color: #512c19;
      }
    }

    .vip_right {
      height: 36rpx;
      width: 144rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;

      text {
        color: #512c19;
        font-size: 24rpx;
      }

      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }

  .money {
    margin-top: 20rpx;
    width: 686rpx;
    height: 160rpx;
    background: #ffffff;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .monet-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }

  .tutor {
    margin-top: 10rpx;
    width: 686rpx;
    background: #ffffff;
    border-radius: 18rpx;

    .bet {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .t_icon {
      margin: 20rpx;
      height: 48rpx;
      width: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        height: 40rpx;
        width: 40rpx;
      }
    }

    .t_text {
      margin-left: -40px;
      width: 450rpx;
    }

    .t_icon_e {
      margin: 20rpx;
    }
  }

  .list_box {
    margin-top: 40rpx;
    width: 686rpx;
    background: #ffffff;
    border-radius: 18rpx;
    overflow: hidden;

    image {
      height: 40rpx;
      width: 40rpx;
    }

    .share {
      width: 686rpx;
      height: 106rpx;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .icon_text {
        width: 542rpx;
        height: 48rpx;
        font-size: 28rpx;
        display: flex;
        align-items: center;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }

  .ad_box {
    margin-top: 20rpx;
    width: 686rpx;
    height: 228rpx;
    border-radius: 12rpx;
  }
}

.overlay {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .login_box {
    width: 80%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50rpx;
    flex-direction: column;
    overflow: hidden;

    .l_title {
      padding: 20rpx;
      margin: 10rpx;
      font-size: 32rpx;
      color: #fc6d21;
    }

    .input {
      margin: 10rpx;
      width: 80%;
      border: 2rpx #999999 solid;
      text-align: center;
      border-radius: 9999rpx;
    }

    .button {
      width: 100rpx;
      height: 100rpx;
      border-radius: 9999rpx;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn {
      margin-top: 20rpx;
      width: 100%;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .line {
        margin: 5rpx;
        width: 5rpx;
        height: 80rpx;
        background: #f5f5f5;
      }

      .subview {
        flex: 1;
        text-align: center;
        background: #f6f6f6;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
